<template>
  <div ref="main" class="echarts"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import {onMounted, ref, watch} from 'vue'

const props = defineProps({
  options:{
    type:Object,
    default:{}
  }
})

const main = ref(null)
onMounted(() => {
  initEchar()
})
const initEchar = () => {
  const myChart = echarts.init(main.value)
  myChart.setOption(props.options)
  const viewElem = document.body
  const resizeObserver = new ResizeObserver(() => {
    myChart.resize()
  })
  resizeObserver.observe(viewElem)
}

watch(
    () => props.options,
    () => {
      initEchar()
    },
    {
      deep:true
    }
)
</script>

<style scoped lang="less">
.echarts{
  width: 100%;
  height: 100%;
}
</style>